import React, { memo, useEffect } from "react";
import { Spin } from "antd";
import { HomeContainer } from "./style";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import BusinessPartners from "@/components/businessPartners";
import { useDispatch } from "react-redux";
import { fetchRecommendListAction } from "@/store/recommendProducts/actions";
import { useSelector } from "@/store/hooks";
import { Outlet } from "react-router-dom";
const Home = memo(() => {
  const { loading } = useSelector((state) => ({
    loading: state.recommendProducts.loading,
  }));
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchRecommendListAction());
  }, []);
  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: "auto",
          marginRight: "auto",
          width: "100%",
        }}
      />
    );
  }
  return (
    <HomeContainer>
      {/* {recommendList[0].title} */}
      <Header></Header>
      <div className="content">
        <Outlet></Outlet>
      </div>
      <BusinessPartners></BusinessPartners>
      <Footer></Footer>
    </HomeContainer>
  );
});

export default Home;
